<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/sys-admin/index' }" style="size: 16px">
                <i class="el-icon-s-promotion"></i>
                后台管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>添加管理员</el-breadcrumb-item>
        </el-breadcrumb>

        <el-divider></el-divider>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" ></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="ruleForm.nickname" ></el-input>
            </el-form-item>
            <el-form-item label="头像" prop="avatar">
                <el-input v-model="ruleForm.avatar" ></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="ruleForm.phone" ></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="ruleForm.email" ></el-input>
            </el-form-item>
            <el-form-item label="简介" prop="description">
                <el-input v-model="ruleForm.description" ></el-input>
            </el-form-item>
            <el-form-item label="是否启用" >
                <el-switch
                        v-model="ruleForm.enable"
                        active-color="#13ce66"
                        inactive-color="#999"
                        active-value="1"
                        inactive-value="0">
                </el-switch>
            </el-form-item >
            <el-form-item label="角色" >
            <el-select v-model="ruleForm.roleIds" multiple placeholder="请选择">
                <el-option
                        v-for="item in roleListOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {

        data() {
            return {
                roleListOptions:'',
                ruleForm: {
                    username:'test-user-001',
                    password:'123456',
                    nickname:'测试用户001',
                    avatar:'https://img2.baidu.com/it/u=4244269751,4000533845&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                    phone:'13712345678',
                    email:'13712345678@139.com',
                    description:'这是测试用户的简介',
                    enable:'1',
                    roleIds:[],

                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
                    ],
                    nickname: [
                        { required: true, message: '请输入昵称', trigger: 'blur' },
                        { min: 2, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
                    ],
                    avatar: [
                        { required: true, message: '请输入头像url', trigger: 'blur' },
                        { min: 10, max: 255, message: '长度在 10 到 255 个字符', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { min: 8, max: 35, message: '长度在 8 到 35 个字符', trigger: 'blur' }
                    ],
                    description: [
                        { required: true, message: '请输入简介', trigger: 'blur' },
                        { min: 2, max: 35, message: '长度在 2 到 35 个字符', trigger: 'blur' }
                    ],
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url="http://localhost:9081/admins/add-new"
                        console.log('url='+url);

                        let fromData=this.qs.stringify(this.ruleForm);
                        console.log('fromData='+fromData);

                        this.axios
                            .create({
                                headers:{
                                    'Authorization':localStorage.getItem('jwt')
                                }
                            })
                            .post(url,fromData).then((response)=>{
                            let responseBody=response.data;
                            console.log(responseBody);
                            if(responseBody.state==20000){
                                this.$message({
                                    showClose: true,
                                    message: '管理员添加成功!',
                                    type: 'success'
                                });
                                this.resetForm(formName);
                            }else{
                                this.$message({
                                    showClose: true,
                                    message: responseBody.message,
                                    type: 'error'
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            loadRoleList(){
                let url='http://localhost:9081/roles';
                console.log('url='+url);
                this.axios
                    .create({
                        headers:{
                            'Authorization':localStorage.getItem('jwt'),
                        }
                    })
                    .get(url).then((response)=>{
                    let responseBody=response.data;
                    if(responseBody.state==20000){
                        this.roleListOptions=responseBody.data;
                    }
                })
            }
        },
        mounted() {
            this.loadRoleList();
        }
    }

</script>

<style scoped>

</style>